<template>
  <view class="index-page">
    <u-navbar
      title="合成活动列表"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>

    <scroll-view
      class="scrool"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view style="height: 100%">
        <view class="wrap" v-for="(item, index) in state.list" :key="index">
          <view class="center">
            <u-image
              width="180"
              height="180"
              :src="item.collection_image"
            ></u-image>
            <view class="text">
              <view style="font-weight: 600">
                {{
                  item.collection_name ? item.collection_name : '暂无名称'
                }}</view
              >
              <view style="font-size: 25rpx"
                >合成时间
                {{ item.activity_start_time + '~' + item.activity_end_time }}
              </view>
              <view class="time">
                <u-button
                  size="default"
                  :ripple="true"
                  shape="circle"
                  :disabled="item.status_text === '已结束'"
                  :custom-style="
                    item.status_text === '已结束'
                      ? state.customStyle2
                      : state.customStyle
                  "
                  @click="push(item.id)"
                  >{{
                    item.status_text === '已结束'
                      ? item.status_text
                      : '查看详情'
                  }}</u-button
                >
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          :status="state.status"
          icon-type="flower"
          margin-top="30"
          margin-bottom="30"
        />
      </view>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { synthesisRuleList } from '@/api/modules/user'
const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff',
    height: '60rpx'
  },
  customStyle2: {
    background: '#9d9d9d',
    color: '#fff',
    height: '60rpx'
  },
  status: 'loadmore',
  list: [] as any,
  page: 0
})
//跳转详情
const push = (id: string) => {
  uni.navigateTo({
    url: `/pages/my/my-compose/index?id=` + id
  })
}
//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  synthesisRuleList({
    page: state.page,
    page_size: 30
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
bottomOut()
</script>
<style lang="less" scoped>
.scrool {
  height : 1530rpx;
}
::v-deep(.u-hairline-border) {
  ::after {
    border : none !important;
  }
}

.wrap {
  position : relative;
  .top {
    margin-bottom : 20rpx;
  }
  .center {
    border-radius : 20rpx;
    background-color : #FFFFFF;
    margin-bottom : 20rpx;
    display : flex;
    padding : 20rpx;
    align-items : center;
    .text {
      margin-left : 40rpx;
      line-height : 60rpx;
    }
  }
  .time {
    position : absolute;
    right : 50rpx;
    top : 20rpx;
  }
}
page {
  background-color : #F3F6FD;
  height : 100%;
}
.index-page {
  height : 100%;
}

</style>
